<template>
    <div>
        <div class="list" v-for="item in list" :key="item.id">
            <div class="title border-bottom"><span class="icon"></span>{{ item.title }}</div>
            <div class="list-title" v-for="(items, index) in item.children" :key="index">
                <div class="title border-bottom">
                    {{ items.title }}
                    <span class="desc" v-if="items.desc">{{ items.desc }}</span>
                </div>
                <div class="price"><span class="num">￥{{ items.price }}</span>起</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
.list
    border-bottom .2rem #eee solid
    .title
        margin-left .2rem
        line-height .88rem
        font-size .32rem
        color #333
        .icon
            display inline-block
            width .36rem
            height .36rem
            background url('//s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.4rem/cover no-repeat
            vertical-align middle
        .desc
            font-size .24rem
            color #aaa
    .list-title
        position relative
        .price
            position absolute
            right .3rem
            top 0
            line-height .88rem
            font-size .24rem
            color #aaa
            .num
                color orange
                font-size .36rem
</style>
